<template>
  <div>
        <!-- 添加输入框 -->
        <div class="insertInput">
            <el-input v-model="insertInput" @keyup.enter.native="postData()" placeholder="请输入需要添加的职位" size="small"></el-input>
            <el-button type="primary" @click="postData()" size="small">添加</el-button>
        </div>

        <!-- 表格 -->
        <Table :config="tableConfig" @getSelectRow="selectRow">
            <template v-slot:operation="depData">
                <el-button size="mini" type="primary" @click="updateData(depData.data)">修改</el-button>
                <el-button size="mini" type="danger" @click="deleteData(depData.data)">删除</el-button>
            </template>
        </Table>

        <!-- 批量删除 -->
        <el-button type="danger" style="margin-top:8px;" @click="deleteData()" :disabled="deleteIds.length==0" size="small">批量删除</el-button>

        <!-- 弹窗组件 -->
        <Dialog :config="dialogConfig" @success="submitData">
            <el-form :model="currentPos">
                <el-form-item label="职位名称" label-width="120">
                <el-input v-model="currentPos.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
        </Dialog>
  </div>
</template>

<script>
import Table from "@/components/Table.vue"
import Dialog from "@/components/Dialog.vue"
import {myConfirm} from '@/utils/myutils'

export default {
  name: "PosComp",
  props: {},
  components: {
    Table,
    Dialog,
  },
  data() {
    return {
        tableConfig:{
            orderNumber:true,
            //表头配置
            tableHeader:[
                {
                    label:'编号',
                    prop:'id',
                    width:'180'
                },
                {
                    label:'名称',
                    prop:'name',
                },
                {
                    label:'添加时间',
                    prop:'createTime',
                    width:'180'
                },
                {
                    label:'最后一次更新时间',
                    prop:'updateTime',
                    width:'180'
                },
                {
                     label:'操作',
                     columnType:'slot',
                     slotName:'operation'
                }
            ],
             //表格数据
            tableData: [],
        },

        dialogConfig:{
            dialogStatus:false,
            dialogTitle:'修改'
        },

        //删除id集合
        deleteIds:[],
        //新增
        insertInput:'',
        //
        currentPos:{
            id:'',
            name:'',
        },
    };
  },
  methods: {
    updateData(obj){
        this.dialogConfig.dialogStatus = true;
        this.currentPos.id = obj.id;
        this.currentPos.name = obj.name;
    },

    //重置表单数据
    resetcurrentPos(){
        let keys = Object.keys(this.currentPos);
        for(let key in keys){
            this.currentPos[key] = '';
        }
    },

    //获取table组件传递回来的checkbox数组
    selectRow(obj){
        let arr = [];
        obj.forEach(element => {
            arr.push(element.id);
        });
        this.deleteIds = arr;
    },

    submitData(obj){
        this.putData();
    },
    

    //删除
    deleteData(obj = {}){
        myConfirm({}).then(()=>{
        if(!(JSON.stringify(obj) === '{}')) this.deleteIds=[obj.id];
        console.log(obj,this.deleteIds)
        if(this.deleteIds.length == 0) return;
        this.$http({
            method:'delete',
            url:'/system/config/pos/',
            data:this.deleteIds
        }).then(resp=>{
            if(resp.code == 0){
                this.$message.success({message:"删除成功!"})
                this.getData()
            }
            this.deleteIds = [];
        });
        }).catch(()=>{this.$message.info({message:'已取消删除'});this.deleteIds = [];});
        
    },

    //更新操作
    putData(){
        this.$http({
            method:'put',
            url:'/system/config/pos/',
            data:this.currentPos
        }).then(resp=>{
            if(resp && resp.code == 0){
                this.$message.success({message:"更新成功!"})
                this.getData()
            };
            this.resetcurrentPos()
        }).catch(()=>{this.resetcurrentPos()})
    },
    

    //添加操作
    postData(){
        this.$http({
            method:'post',
            url:'/system/config/pos/',
            data:{name:this.insertInput}
        }).then(resp=>{
            if(resp && resp.code == 0){
                this.$message.success({message:"添加成功!"})
                this.getData()
            };
            this.insertInput = ''
        }).catch(()=>{this.insertInput = ''})
    },

    //获取列表
    getData(){
        this.$http({
            method:'get',
            url:'/system/config/pos/'
        }).then(resp=>{
            this.tableConfig.tableData = resp;
        })
    }
  },
  mounted() {
      this.getData()
  },
  watch: {},
  computed: {},
  filters: {},
};
</script>

<style scoped>
.insertInput{
    margin-bottom:8px;
}

.insertInput .el-input{
    width:300px;
    margin-right:5px;
}
</style>